<template>
  <div class="wrapper_hrdepartment">
    <div class="list">
      <div class="item">
        <div class="item_title">
          昨日人天复核情况 <span style="color:#999999;padding-left:20px;font-size:16px">(次日00:00自动启动复核工作) </span>
        </div>
        <div class="item_content">
          <div class="item_content_list">
            <div v-for="(item, index) of hrListOne" :key="index" class="item">
              <div class="item_label">{{ item.title }}</div>
              <div class="num" :style="{color:color[index]}">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item_title">
          今日日报提交情况 <span style="color:#999999;padding-left:20px;font-size:16px">(截止当前时间)</span>
        </div>
        <div class="item_content">
          <div class="item_content_list">
            <div v-for="(item, index) of hrListTwo" :key="index" class="item">
              <div class="item_label">{{ item.title }}</div>
              <div class="num" :style="{color:color[index]}">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import overView from './components/overView'
import customerTable from './components/customerTable'

const column = [
  {
    prop: 'name',
    label: '成员'
  },
  {
    prop: 'date',
    label: '所属部门'
  },
  {
    prop: 'date',
    label: '岗位'
  },
  {
    prop: 'date',
    label: '员工性质'
  },
  {
    prop: 'date',
    label: '本月工作日'
  },
  {
    prop: 'date',
    label: '本月计划人天'
  },
  {
    prop: 'date',
    label: '本月打卡人天'
  },
  {
    prop: 'date',
    label: '本月稼动率'
  }
]
const titles = [
  {
    title: '总份数'
  },
  {
    title: '核验成功'
  },
  {
    title: '核验异常（考勤、休假等）'
  }
]
const today = [
  {
    title: '总份数'
  },
  {
    title: '已提交'
  },
  {
    title: '未提交'
  }
]
export default {
  components: {
    overView,
    customerTable
  },
    props:{
        hrListOne:{
            type: Array,
            default() {
                return []
            }
        },
        hrListTwo:{
            type: Array,
            default() {
                return []
            }
        }
    },
  data() {
    return {
      color:['#3F9EFF','#6DD400','#FA6400'],
      tableData: [

        {
          name: '中科云评测',
          date: '2020-6-30',
          percent: 10

        },
        {
          name: '中科云评测',
          date: '2020-6-30',
          percent: 20
        },
        {
          name: '中科云评测',
          date: '2020-6-30',
          percent: 30
        }
      ],
      titleStr: '人力稼动情况'+ '         '+'以下为本月初开始至今天每个员工的稼动情况',
      titles,
      today,
      yesterdayData: ['20', '30', '40'],
      column
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
  &_hrdepartment{
    margin-top: 20px;
    .list{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      .item{
        // flex: 1;
        width: 49%;
        display: flex;
        flex-direction: column;
        .item_title{
          // padding-left: 22px;
        }
        .item_content{
          margin-top: 20px;
          background: white;
          padding: 20px;
          .item_content_title{
            color: #cccccc;
          }
          .item_content_list{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin-top: 40px;
            margin-bottom: 60px;
            .item{
              display: flex;
              flex-direction: column;
              align-items: center;
               position: relative;
                &:nth-child(1)::after{
              position: absolute;
              content: "";
              width: 0px;
              height: 100px;
              top: 50%;
              border-right: 1px solid #ccc;
              right: 10px;
              border-color: #F2F2F2;
              transform: translateY(-50%);
      }
            &:nth-child(2)::after{
              position: absolute;
              content: "";
              width: 0px;
              height: 100px;
              top: 50%;
              border-right: 1px solid #ccc;
              right: 10px;
              border-color: #F2F2F2;
              transform: translateY(-50%);
      }
              .item_label{
                white-space: nowrap;
                font-size: 14px;
                color: #555555;
              }
              .num{
                font-size: 26px;
                font-weight: bold;
                margin-top: 15px;
                letter-spacing: 0;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
.defaultCircle{
  position: relative;
  &::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7F7F7F;
    top: 50%;
    left: 0;
    // transform: translateY(-50%);
  }
}
</style>
